<template>
  <div :class="{'mobile-create': showMobilePage}" class="create-legal-wrap">
    <ProgressStep v-if="!showMobilePage && contractType !== CONTRACT_TYPE.HISTORY" :mode="2" :step-list="stepList" :order-status="stepActiveId" :is-show-correct="false" />
    <div v-if="stepActiveId === 0" class="legal-select">
      <Title title="合同类型" style="margin-bottom: 16px;" />
      <div class="type-box">
        <div v-for="(item, index) in typeOptions" :key="index" :class="{'active': contractType === item.value}" class="type-item" @click="handleSelectType(item)">
          <el-tooltip placement="top">
            <div slot="content">{{ item.tip }}</div>
            <div class="item-content">
              <img :src="item.icon" alt="icon">
              <p>{{ item.label }}</p>
            </div>
          </el-tooltip>
        </div>
      </div>
      <fixed-pagination>
        <div class="center">
          <el-button type="info" size="small" class="back-btn cancel-btn-style" @click="handleBack">返回列表</el-button>
          <!--<el-button type="primary" size="small" class="submit-btn" @click="handleNext">下一步</el-button>-->
        </div>
      </fixed-pagination>
    </div>
    <div v-if="stepActiveId === 1">
      <explanation :explanation="explanationObj" style="margin-bottom:0;" class="explanation"/>
      <div class="legal-from">
        <div class="legal-container">
          <!--一般购销/委托服务类-->
          <staff-administration-legal v-if="contractType === CONTRACT_TYPE.STAFF" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--推广销售类 || 渠道采买类-->
          <we-media-legal v-if="contractType === CONTRACT_TYPE.SPREAD || contractType === CONTRACT_TYPE.PURCHASE" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--IP商业授权类-->
          <ip-accredit-legal v-if="contractType === CONTRACT_TYPE.IP" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--kol类-->
          <kol-legal v-if="contractType === CONTRACT_TYPE.KOL" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--平台合作类-->
          <platform-legal v-if="contractType === CONTRACT_TYPE.PLATFORM" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--电商产品购销类-->
          <e-commerce-Legal v-if="contractType === CONTRACT_TYPE.E_COMMERCE" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--投资类-->
          <invest-legal v-if="contractType === CONTRACT_TYPE.INVEST" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--其他类-->
          <other-legal v-if="contractType === CONTRACT_TYPE.OTHER" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
          <!--历史合同-->
          <history-legal v-if="contractType === CONTRACT_TYPE.HISTORY" :type="contractType" :legal-detail="legalDetail" @setExplanation="setExplanation" @toBackStep="toBackStep"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import StaffAdministrationLegal from './legalVariety/staffAdministrationLegal.vue';
import IpAccreditLegal from './legalVariety/ipAccreditLegal';
import ProgressStep from '@/components/CreateOrder/orderDetail/step';
import explanation from '@/components/Common/explanation';
import Title from '@/components/Title';
import ECommerceLegal from './legalVariety/eCommerceLegal';
import PlatformLegal from './legalVariety/platformLegal';
import WeMediaLegal from './legalVariety/weMediaLegal';
import HistoryLegal from './legalVariety/historyLegal';
import InvestLegal from './legalVariety/investLegal';
import OtherLegal from './legalVariety/otherLegal';
import KolLegal from './legalVariety/kolLegal';
import { getContractDetail } from '@/api/legal';
import { CONTRACT_TYPE } from '@/utils/const/contract';
import { isJSON } from '@/utils/tools';
import { decrypt } from '@/utils';
import mobileCreate from '@/mixins/mobileCreate';
import { typeOptions } from '../module/options';

export default {
  name: 'CreateContract',
  components: {
    WeMediaLegal,
    IpAccreditLegal,
    StaffAdministrationLegal,
    KolLegal,
    PlatformLegal,
    ECommerceLegal,
    InvestLegal,
    OtherLegal,
    HistoryLegal,
    explanation,
    ProgressStep,
    Title
  },
  mixins: [mobileCreate],
  data() {
    return {
      CONTRACT_TYPE,
      contractType: null,
      // legalDetail: null,
      legalDetail: {},
      explanationObj: {
        content: '',
        styConfig: ''
      }, // 审批说明
      stepActiveId: 0,
      typeOptions
    };
  },
  computed: {
    stepList() {
      return [
        { name: '选择类型', id: 0 },
        { name: '填写信息', id: 1 },
        { name: '合同审批', id: 2 },
        { name: '流程结束', id: 3 }
      ];
    }
  },
  created() {
    const legalId = decrypt(this.$route.params.id);
    const contractType = this.$route.query.type;
    if (contractType) { // 新建要走的逻辑
      this.contractType = Number(contractType);
      this.stepActiveId = 1;
      // this.legalDetail = 'create';
    }
    // if (contractType === this.CONTRACT_TYPE.HISTORY) {
    //   this.stepActiveId = 1;
    // }
    if (legalId) { // 编辑时需要走的逻辑
      this.stepActiveId = 1;
      this.getDetail(legalId);
    }
  },
  methods: {
    isJSON,
    setExplanation(content, styConfig) {
      if (styConfig && this.isJSON(styConfig)) {
        styConfig = JSON.parse(styConfig);
        styConfig.padding = '8px 35px';
      } else {
        styConfig = {};
        styConfig.padding = '8px 35px';
      }
      this.explanationObj.content = content || '';
      this.explanationObj.styConfig = JSON.stringify(styConfig) || '';
    },
    getDetail(legalId) {
      getContractDetail(legalId).then(res => {
        if (res.code === 200) {
          this.explanationObj.content = res.data.explanation || '';
          this.explanationObj.styConfig = res.data.styConfig || '';
          this.legalDetail = JSON.parse(JSON.stringify(res.data));
          this.legalDetail.oldAduitInfo = res.data.aduitInfo;
          if (this.legalDetail.contractInfo.contractList && this.legalDetail.contractInfo.contractList.length) {
            this.legalDetail.contractInfo.contractList.forEach(it => {
              it.userName = it.proposerName;
            });
          }
          this.$nextTick(() => {
            if (this.contractType === 7) {
              this.formatContractInfos(this.legalDetail.merchandiseInfos);
            }
            if (![1, 5].includes(this.contractType)) {
              // 一般购销、达人kol不需要改变参数
              this.legalDetail.contractInfo.oppCompany = {
                name: this.legalDetail.contractInfo.oppCompany,
                id: this.legalDetail.contractInfo.oppCompanyId,
                type: this.legalDetail.contractInfo.oppCompanyType
              };
            }
          });
          this.contractType = this.legalDetail.contractInfo.type;
        }
      });
    },
    formatContractInfos(list) {
      if (!Array.isArray(list) || !list.length) return;
      list.forEach(item => {
        item['unsetKey'] = { attachment: [], effectiveDate: '' };
      });
    },
    handleSelectType(item) {
      this.contractType = item.value;
      this.legalDetail = {};
      this.stepActiveId = 1;
    },
    // handleNext() {
    //   if (!this.contractType) {
    //     ElMessage.warning('请先选择合同类型！');
    //     return;
    //   }
    //   this.stepActiveId = 1;
    // },
    handleBack() {
      this.$router.push({ name: 'ContractManagement' });
    },
    toBackStep(val) {
      if (val) {
        for (const i in val) {
          this.$set(this.legalDetail, i, val[i]);
        }
      }
      this.stepActiveId = 0;
    }
  }
};
</script>
<style lang="scss" scoped>
.legal-select {
  padding: 20px 24px 24px;
  background: #FFFFFF;
  min-height: calc(100vh - 56px);
  .type-box {
    display: flex;
    flex-wrap: wrap;
    .type-item {
      width: 268px;
      height: 80px;
      margin: 0 16px 16px 0;
      border: 1px solid #EBEEFD;
      border-radius: 4px;
      cursor: pointer;
      .item-content {
        display: flex;
        align-items: center;
        padding: 16px;
      }
      img {
        width: 48px;
        height: 48px;
        margin-right: 16px;
      }
      p {
        margin: 0;
        font-size: 16px;
        color: #333;
      }
      &.active {
        position: relative;
        border-color: #406EFF;
        background: #FAFBFF;
        &::after {
          display: block;
          width: 24px;
          height: 24px;
          content: '';
          position: absolute;
          right: -1px;
          top: -1px;
          background: url('../../../assets/legal/select.png');
          background-size: cover;
        }
      }
    }
  }
}
.create-legal-wrap {
  background-color: #fff;
  margin: 16px 16px 0;
  .legal-from {
    padding-top: 20px;
  }
  .legal-container{
    padding: 0px 24px 56px 24PX;
    min-height: calc(100vh - 48px - 32px);
  }
}
</style>
